<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <!-- 1.防止float引起的父类元素高度塌陷 -->
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>


    <!-- 2.防止margin重叠 -->
    <div class="container">
        <div class="box"></div>
        <div style="display: inline-block;" class="box"></div>
    </div>


    <!-- 3.防止float两栏布局失效 -->
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;">
        非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处
    </div>
    
    <!-- 解决此方法我们可以把第二个div元素设置为一个BFC -->
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;display:flex;">
        非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处非商业转载请注明出处
    </div>
</body>
</html>